<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 后台管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <style>
        html, body {
            height: 100%;
        }
        body {
            display: flex;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }
        .form-signin {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        .form-signin .form-floating:focus-within {
            z-index: 2;
        }
        .form-signin input[type="text"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }
        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .login-header {
            margin-bottom: 30px;
            text-align: center;
        }
        .login-header img {
            width: 72px;
            height: 72px;
            margin-bottom: 20px;
        }
        .login-header i {
            color: #007bff;
            margin-bottom: 15px;
        }
        .btn-login {
            background-color: #007bff;
            border-color: #007bff;
            transition: all 0.3s;
        }
        .btn-login:hover {
            background-color: #0069d9;
            border-color: #0062cc;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .footer-links {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .remember-me {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .remember-me input {
            margin-right: 5px;
        }
        
        /* 响应式调整 */
        @media (max-width: 576px) {
            .form-signin {
                padding: 15px 20px;
                box-shadow: none;
                border-radius: 0;
            }
            body {
                background-color: #fff;
                padding: 20px 0;
            }
        }
    </style>
</head>
<body class="text-center">
    <main class="form-signin">
        <div class="login-header">
            <i class="bi bi-shield-lock text-primary" style="font-size: 3rem;"></i>
            <h1 class="h3 mb-3 fw-normal">后台管理系统</h1>
        </div>
        
        <form id="loginForm">
            <div class="form-floating">
                <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required>
                <label for="username">用户名</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="password" name="password" placeholder="密码" required>
                <label for="password">密码</label>
            </div>
            
            <div class="remember-me">
                <input type="checkbox" id="remember-me" class="form-check-input">
                <label for="remember-me" class="form-check-label">记住我</label>
            </div>
            
            <div class="alert alert-danger d-none" id="error-message"></div>
            
            <button class="w-100 btn btn-lg btn-primary btn-login" type="submit">
                <i class="bi bi-box-arrow-in-right me-2"></i>登录
            </button>
            
            <div class="footer-links">
                <a href="/register" class="text-decoration-none">注册账号</a>
                <a href="#" class="text-decoration-none" id="forgot-password">忘记密码？</a>
            </div>
            
            <p class="mt-5 mb-3 text-muted">© 2025 管理系统</p>
        </form>
    </main>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        // 认证相关函数
        const Auth = {
            // 获取token
            getToken: function() {
                return localStorage.getItem('token');
            },
            
            // 设置token
            setToken: function(token) {
                localStorage.setItem('token', token);
            },
            
            // 移除token
            removeToken: function() {
                localStorage.removeItem('token');
            },
            
            // 检查是否已登录
            isLoggedIn: function() {
                return !!this.getToken();
            },
            
            // 登出
            logout: function() {
                this.removeToken();
                window.location.href = '/login';
            }
        };
        
        $(document).ready(function() {
            // 如果已登录，直接跳转到首页
            if (Auth.isLoggedIn()) {
                window.location.href = '/admin';
                return;
            }
            
            // 忘记密码点击事件
            $('#forgot-password').click(function(e) {
                e.preventDefault();
                alert('请联系系统管理员重置密码');
            });
            
            $('#loginForm').on('submit', function(e) {
                e.preventDefault();
                
                // 获取表单数据
                var formData = {
                    username: $('#username').val(),
                    password: $('#password').val()
                };
                
                // 禁用提交按钮，显示加载状态
                const $submitBtn = $(this).find('button[type="submit"]');
                $submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 登录中...');
                
                // 隐藏之前的错误信息
                $('#error-message').addClass('d-none');
                
                // 发送登录请求
                $.ajax({
                    url: '/api/login',
                    type: 'POST',
                    contentType: 'application/x-www-form-urlencoded',
                    data: {
                        username: formData.username,
                        password: formData.password
                    },
                    success: function(response) {
                        // 保存JWT令牌到localStorage
                        Auth.setToken(response.access_token);
                        
                        // 如果勾选了"记住我"，可以设置令牌有效期更长
                        if ($('#remember-me').is(':checked')) {
                            // 这里实际上无法延长令牌有效期，但可以记录用户选择
                            localStorage.setItem('remember_me', 'true');
                        }
                        
                        // 登录成功，跳转到首页
                        window.location.href = '/admin';
                    },
                    error: function(xhr) {
                        // 显示错误信息
                        var errorMessage = '登录失败';
                        if (xhr.responseJSON && xhr.responseJSON.detail) {
                            errorMessage = xhr.responseJSON.detail;
                        }
                        $('#error-message').text(errorMessage).removeClass('d-none');
                        
                        // 恢复提交按钮状态
                        $submitBtn.prop('disabled', false).html('<i class="bi bi-box-arrow-in-right me-2"></i>登录');
                    }
                });
            });
        });
    </script>
</body>
</html> 